<template>
    <div class="edu-page-warp">
         <condition-card
            @reset="reset"
            @search="onSubmit"
            label-width="120px"
        >
            <el-col :span="8">
                <el-form-item :label="$t('label.nowGrade')">
                    <el-date-picker
                        v-model="queryForm.grade"
                        type="year"
                        value-format="yyyy"
                        :clearable="false"
                        :placeholder="$t('message.plzSelect')" style="width:100%"
                        @change="handleGradeChanged"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="结业年级">
                    <el-date-picker
                        v-model="queryForm.completionYear"
                        type="year"
                        value-format="yyyy"
                        :placeholder="$t('message.plzSelect')" style="width:100%"
                        >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="预科生专业">
                    <el-select v-model="queryForm.classId"  style="width:100%" clearable filterable>
                         <el-option v-for="(item,index) in options.classes" :key="'class-'+index"  :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>           
            <el-col :span="8">
                <el-form-item label="填报状态" >
                    <el-select v-model="queryForm.applyStatus"  style="width:100%" clearable>
                        <el-option v-for="(item,index) in options.applyStatus" :key="'applyStatus-'+index"  :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">学生填报志愿</div>
            <el-row style="margin-bottom:8px">
                <el-col :span="4">
                    <el-input
                        v-model="queryForm.keyword"
                        :placeholder="$t('score.failScoreManage.pleaseInt')"
                        @keyup.enter.native="onSubmit"
                        style="width:200px"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="onSubmit"
                        ></i>
                    </el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <edu-table
                        :url="getUrl()"
                        ref="mainTable"
                        :order="false"
                        :selection="false"
                    >
                        <el-table-column :label="$t('label.stuCode')"   width="100" fixed="left" prop="studentCode"/>
                        <el-table-column :label="$t('label.stuName')"  width="100" fixed="left" prop="studentName" show-overflow-tooltip />
                        <el-table-column label="预科生专业"  width="165" fixed="left" prop="className" show-overflow-tooltip />
                        <el-table-column :label="$t('label.nowGrade')" width="100" prop="grade"/>
                        <el-table-column label="结业年级" width="100" prop="completionYear"/>
                        <el-table-column :label="$t('label.college')"  width="160" prop="facultyI18n"/>
                        <el-table-column :label="item.label" v-for="(item,index) in queryForm.list" :key="index" show-overflow-tooltip width="200">
                            <template slot-scope="scope">
                               {{getMajorName(index,scope.row)}}
                            </template>
                        </el-table-column>
                        <el-table-column label="录取专业"  prop="admissionProfessionName" width="200" show-overflow-tooltip>
                             <template slot-scope="scope">
                               {{scope.row.admissionProfession?scope.row.admissionProfessionName+"("+scope.row.admissionProfession+")":null}}
                            </template>
                        </el-table-column>
                        <el-table-column label="填报状态" width="100" align="center">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.applyStatus==1">已填报</el-tag>
                                <el-tag v-else type="info">未填报</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="联系电话" width="150" show-overflow-tooltip prop="telephone"/>
                        <el-table-column label="联系地址" width="150" show-overflow-tooltip prop="address"/>
                        <el-table-column :label="$t('label.operation')" width="80" fixed="right" align="center">
                            <template slot-scope="scope">
                                <el-button v-if="!scope.row.admissionProfession" type="text" @click="handleDialog(scope.row)">填报志愿</el-button>
                            </template>
                        </el-table-column>
                    </edu-table>
                </el-col>
            </el-row>
        </el-card>
        <edu-dialog
            :visible.sync="showEnrollDialog"
            title="填报志愿"
            ref="formDialog"            
            @confirm="confirmDialog"
            width="400px"
        >
            <el-form :model="submitForm" ref="submitForm" label-width="100px" label-suffix="：">
                <el-row >
                      <el-form-item :label="$t('label.stuCode')" >
                          <el-col :span="20">
                              {{submitForm.studentCode}}
                          </el-col>
                      </el-form-item>
                </el-row>
                <el-row>
                      <el-form-item :label="$t('label.stuName')" >
                          <el-col :span="20">
                              {{submitForm.studentName}}
                          </el-col>
                      </el-form-item>
                </el-row>
                <el-row>
                      <el-form-item :label="$t('label.nowGrade')" >
                          <el-col :span="20">
                              {{submitForm.grade}}
                          </el-col>
                      </el-form-item>
                </el-row>
                <el-row>
                      <el-form-item label="预科生专业" >
                          <el-col :span="20">
                              {{submitForm.className}}
                          </el-col>
                      </el-form-item>
                </el-row>
                <el-row v-for="(item,index) in queryForm.list" :key="index">
                    <el-form-item :label="item.label" >
                          <el-col :span="14">
                            <el-select v-model="submitForm.major[index]"  style="width:100%" clearable filterable>
                                <el-option v-for="(item,index) in options.major" :key="'class-'+index"  :label="item.label" :value="item.value" />
                            </el-select>
                          </el-col>
                      </el-form-item>
                </el-row>
            </el-form>            
        </edu-dialog>
    </div>
</template>
<script>
import * as APIs from "common/src/api/preparatoryGraduation/enroll"
 export default {
    name: "teacherEnroll",    
    data() {
        return {
            number:null,
            queryForm:{
                grade:null,
                completionYear:null,
                list:[],
                applyStatus:null,
                keyword:null,
                classId:null
            },
            options:{
                applyStatus:[],
                major:[],
                recruitMajor:[],
                classes:[]
            },
            showEnrollDialog:false,
            submitForm:{
                studentCode:null,
                studentName:null,
                className:null,
                grade:null,
                major:[],
                telephone:null,
                address:null
            }
        }
    },
    mounted(){
        this.queryForm.grade=((new Date()).getFullYear()-1).toString();
        this.getMajorNumber();  
        this.initOption();
        this.handleGradeChanged(this.queryForm.grade);
        this.onSubmit();
    },
    methods:{
        reset(){
            this.queryForm.grade=((new Date()).getFullYear()-1).toString();
            this.queryForm.completionYear=null;
            this.queryForm.applyStatus=null;
            this.queryForm.keyword=null; 
            this.handleGradeChanged(this.queryForm.grade);
            this.onSubmit();          
        },
        getParam(){
            let param=_.cloneDeep(this.queryForm)
            param.grade=param.grade;
            param.list=[];
            if(this.queryForm.classId==''){
                param.classId=null;
            }
            return param;
        },
        onSubmit(){
            this.$refs.mainTable.search(this.getParam());
        },
        getUrl(){
            return APIs.getListPage()
        },
        initOption(){
            this.options.applyStatus.push({
                label:'已填报',
                value:1
            });
            this.options.applyStatus.push({
                label:'未填报',
                value:0
            });
        },
        getMajorNumber(){
            APIs.getAuthority().then(res=>{
                if(res.code==200){
                    if(res.data){
                        this.number=res.data.choiceNumber;
                        if(this.number>10){
                            this.number=10;
                        }
                        for(let i=1;i<=this.number;i++){
                            this.queryForm.list.push({
                                label:this.convertNum(i),
                                value:null
                            })
                        }
                    }
                }
            });
        },
        convertNum(n){
            if(n<=0||n>10){
                throw "valid error"
            }
            let arr=['','一','二','三','四','五','六','七','八','九','十']
            return '志愿'+arr[n]
        },
        handleGradeChanged(val){
            this.queryForm.classId=null;
            this.options.classes=[];
            this.handleClasses();
        },
        handleClasses(){
            APIs.getClassList(
                {pageNum_:1,pageSize_:100,condition:{grade:this.queryForm.grade }}
            ).then(res=>{
                if(res.code==200){
                    this.options.classes=res.data.list.map(major_=>{
                        return {
                            label:major_.className,
                            value:major_.id.toString()
                        }
                    })
                }
            });
        },
        getMajorName(index,row){
            if(index<row.list.length){
                return row.list[index].choiceName+"("+row.list[index].choice+")";
            }
            return null;
        },
        async handleDialog(row){
            await APIs.getOfferedProfession({studentCode:row.studentCode}).then(res=>{
                if(res.code==200){
                    this.options.major=res.data.map(m=>{
                        return {
                            label:m.professionName+" ("+m.profession+")",
                            value:m.profession                           
                        }
                    })                   
                }
            })
            this.showEnrollDialog=true;
            this.submitForm.studentCode=row.studentCode;
            this.submitForm.studentName=row.studentName;
            this.submitForm.className=row.className;
            this.submitForm.grade=row.grade;
            this.submitForm.address=row.address;
            this.submitForm.telephone=row.telephone;
            let choice=[];
            choice.length=this.queryForm.list.length;
            choice.fill(null);
            if(row.list.length>0){
                choice=row.list.map(item=>item.choice)
            }
            this.submitForm.major=choice;
        },
        confirmDialog(){
            if(this.submitForm.major.length > 0){
                if(this.submitForm.major.some(major=>major == null || major == '')){
                    this.$message({
                        type:"error",
                        message:"志愿不能为空"
                    });
                    return;
                }
                let codes=new Set(this.submitForm.major)
                if(codes.size < this.submitForm.major.length){
                    this.$message({
                        type:"error",
                        message:"志愿不能重复"
                    });
                    return;
                }
                let param={
                    grade:this.submitForm.grade,
                    studentCode:this.submitForm.studentCode,
                    studentName:this.submitForm.studentName,
                    telephone:this.submitForm.telephone,
                    address:this.submitForm.address,
                    list:[]
                };
                this.submitForm.major.forEach((choice,index_)=>{
                    let m = this.options.major.find(item => item.value === choice)
                    param.list.push({
                        level:index_+1,
                        choice:choice,
                        choiceName:m?m.label:null
                    })
                })
                APIs.addStudentVolunteer(param).then(res=>{
                    if(res.code==200){
                        this.$message({
                            type: "success",
                            message: "志愿填报成功"
                        });
                        this.showEnrollDialog=false;
                        this.onSubmit();
                    }
                });
            }
        }
    }
 }
</script>